// components/video-box/index.ts
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        urls: {
            type: Object,
            value: {}
        },
        caption: {
            type: String,
            value: ''
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        videoSrc: '',
        paused: true,
        progress: 0,
        duration: 0,  // 新增总时长存储
        currentTime: 0,
        isSeeking: false,
        trackWidth: 0,
        quanlityOptions: [{ id: 0, label: '标清', value: 'SD' }, { id: 1, label: '高清', value: 'HD' }],
        quanlity: {},
        showSelector: false,
        isFullScreen: false,
    },

    lifetimes: {
        attached() { // 替换原来的 onLoad
            this.getTrackWidth();
            this.setData({ quanlity: this.data.quanlityOptions[0] })
            this.setData({ videoSrc: this.properties.urls[this.data.quanlity.value] })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        togglePlay() {
            //获取视频实例
            const videoCtx = wx.createVideoContext('myVideo', this); // 需确保视频组件有 id="myVideo"
            //根据当前状态切换播放/暂停
            if (this.data.paused) {
                videoCtx.play(); // 播放视频
            } else {
                videoCtx.pause(); // 暂停视频
            }
            //更新 paused 状态
            this.setData({
                paused: !this.data.paused
            });
        },

        // 监听视频原生事件以同步状态
        onVideoPlay() {
            this.setData({ paused: false }); // 播放时隐藏蒙层
        },
        onVideoPause() {
            this.setData({ paused: true }); // 暂停时显示蒙层
        },
        // 视频元数据加载完成后获取精确时长
        onVideoLoadedMetaData(e) {
            this.setData({
                duration: e.detail.duration
            });
        },
        // 时间更新事件处理（核心逻辑）
        onTimeUpdate(e) {
            if (this.data.isSeeking) return;  // 拖拽时不更新进度
            const { currentTime, duration } = e.detail;
            this.setData({
                currentTime,
                duration,
                progress: (currentTime / duration) * 100 || 0  // 计算百分比
            });
        },
        // 触摸开始
        handleTouchStart(e) {
            this.setData({ isSeeking: true });
            this.seekVideo(e);
        },

        // 触摸移动
        handleTouchMove(e) {
            if (!this.data.isSeeking) return;
            this.seekVideo(e);
        },

        // 触摸结束
        handleTouchEnd() {
            this.setData({ isSeeking: false });
        },

        // 点击跳转
        handleProgressTap(e) {
            this.seekVideo(e);
        },
        // 获取进度条实际宽度（核心方法）
        getTrackWidth() {
            const query = wx.createSelectorQuery().in(this); // 注意组件内查询需加.in(this)
            query.select('#progressTrack')
                .boundingClientRect(res => {
                    if (res?.width) {
                        this.setData({ trackWidth: res.width });
                    }
                    console.log(this.data.trackWidth)
                }).exec();

        },
        // 统一跳转方法
        seekVideo(e) {
            const videoCtx = wx.createVideoContext('myVideo', this);
            const { duration } = this.data;
            const touchX = e.touches?.[0]?.pageX || e.detail?.x;
            const trackWidth = this.data.trackWidth;  // 需通过API获取实际宽度
            const progress = (touchX / trackWidth) * 100;
            const seekTime = (progress / 100) * duration;
            this.setData({ progress, paused: false });
            videoCtx.seek(seekTime);
            videoCtx.play()
        },
        chooseQuanlity() {
            this.setData({ showSelector: this.data.showSelector ? false : true })
        },
        changeQuanlity(e) {
            const id = e.currentTarget.dataset.id;
            const selectedQuality = this.data.quanlityOptions.find(item => item.id === id);

            if (!selectedQuality || selectedQuality.id === this.data.quanlity.id) return;

            // 记录当前播放进度（网页7提到的播放进度延续逻辑）
            const currentTime = this.data.currentTime;

            // 切换清晰度（网页6的setData更新逻辑）
            this.setData({
                quanlity: selectedQuality,
                videoSrc: this.properties.urls[selectedQuality.value],
                showSelector: false
            }, () => {
                // 回调函数确保数据更新完成（网页6的数据绑定特性）
                const videoCtx = wx.createVideoContext('myVideo', this);

                // 解决安卓机型切换后黑屏问题（网页3的兼容性问题）
                setTimeout(() => {
                    // 跳转到之前进度（网页7的进度保持方案）
                    videoCtx.seek(currentTime);

                    // 保持播放状态（网页7播放状态管理）
                    if (!this.data.paused) {
                        videoCtx.play();

                        // 部分机型需要延迟操作（网页3的兼容性处理）
                        setTimeout(() => {
                            videoCtx.play();
                        }, 300);
                    }
                }, 300);
            });
        },
        toFullScreen() {
            // 先强制横屏再进入全屏
            wx.setPageOrientation({
                orientation: 'landscape',
                success: () => {
                    this.triggerEvent('fullScreen', {
                        isFullScreen: true
                    }, { bubbles: true });
                    this.setData({
                        isFullScreen: true,
                        paused: false
                    });
                },
                fail: (err) => {
                    console.error('横屏失败:', err);
                    wx.showToast({ title: '横屏模式不可用', icon: 'none' });
                    // 降级方案：仅设置全屏状态（参考网页7）
                    this.setData({ isFullScreen: true });
                }
            });
        },
        exitFullScreen() {
            wx.setPageOrientation({
                orientation: 'portrait',
                success: () => {
                    this.triggerEvent('fullScreen', {
                        isFullScreen: false
                    }, { bubbles: true });
                    this.setData({
                        isFullScreen: false,
                        paused: false
                    });
                },
                fail: (err) => {
                    console.error('竖屏失败:', err);
                    wx.showToast({ title: '竖屏模式不可用', icon: 'none' });
                    // 降级方案：仅设置全屏状态（参考网页7）
                    this.setData({ isFullScreen: false });
                }
            });
        },
    }
})